<template>
  <view class="column-order-quantity analyse">
    <view class="title">
      <view class="t-l">
        {{ title }}
        <text v-if="unit" class="unit">（{{ unit }}）</text>
      </view>
      <view class="t-r" v-if="orderRecord" @tap="toOrderRecord()">订单记录></view>
    </view>
    <view class="charts-box" :style="chartsBoxH">
      <uni-ec-canvas
        class="uni-ec-canvas"
        id="uni-ec-canvas"
        ref="canvas"
        canvas-id="lazy-load-chart"
        :ec="ec"
      ></uni-ec-canvas>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '../..//uni_modules/echart/uni-ec-canvas/uni-ec-canvas'
export default {
  name: '',
  components: {
    uniEcCanvas
  },
  props: {
    title: String,
    unit: String,
    data: Array,
    orderRecord: Boolean
  },
  data () {
    let color = ['#9054EF', '#4ADEE0', '#5371F0', '#F17891', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE',
      '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'
    ]
    return {
      ec: {
        option: {
          color,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: this.data.map(d => d.name)
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: false,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            'splitLine': {
              'show': false
            }
          },

          yAxis: {
            show: false,
            type: 'category',
            inverse: true
          },

          series: this.data.map((d, index) => {
            return {
              name: d.name,
              type: 'bar',
              data: [d.value],
              barGap: 5,
              barWidth: 6,
              label: {
                show: true,
                position: 'insideLeft',
                align: 'left',
                offset: [0, -15],
                formatter: '{value|{c}} {name|{a}}',
                fontSize: 16,
                rich: {
                  value: {
                    color: color[index % color.length]
                  },
                  name: {
                    color: '#000',
                    fontSize: 10,
                    fontWeight: '100',
                    textShadowColor: '#fff',
                    shadowColor: '#fff',
                    textBorderColor: '#fff'
                  }
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 15
                }
              },
              showBackground: true,
              backgroundStyle: {
                color: '#F5F5F5'
              }
            }
          })
        }
      }
    }
  },
  computed: {
    chartsBoxH () {
      let legendH = Math.floor(this.data.length / 3) * 100
      let itemH = 110
      let gap = 0
      //  itemH*this.data.length
      let height = itemH * this.data.length + legendH + gap
      return `height:${height}rpx`;
    }
  },
  methods: {
    toOrderRecord (e) {
      this.nav('/subpackage/shop/pages/record/index')
    }
  }
}
</script>

<style lang="less">
.column-order-quantity {
  margin: 30rpx 30rpx 0 30rpx;
  background: #fff;
  border-radius: 10rpx;

  .charts-box {
    width: 100%;
    height: 800rpx;
  }

  .title {
    position: relative;
    width: 100%;
    height: 100rpx;
    padding: 0 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #e6e6e6;

    .t-l {
      margin-left: 20rpx;
      width: 500rpx;
      height: 100rpx;
      font-size: 33rpx;
      font-weight: bold;

      &::before {
        content: "";
        position: absolute;
        top: 53%;
        left: 2%;
        width: 6rpx;
        height: 30rpx;
        background: @color-theme;
        border-radius: 3rpx;
        transform: translateY(-50%);
      }

      .unit {
        display: inline-block;
        padding-top: 40rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #333;
      }
    }

    .t-r {
      width: 200rpx;
      color: #dc117d;
      font-size: 33rpx;
    }
  }

  .uni-ec-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>